<template>
	<view class="common">
		<uni-nav-bar :fixed="true" color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left"
			status-bar title="附近门店" @clickLeft="back" />
		<view class="main">

			<!-- 搜索框 -->
			<view class="search" >
					<view class="nav">
						<uni-search-bar  radius="100" placeholder="一直不显示" clearButton="none"
							cancelButton="none" @confirm="search" />
						
					</view>

				
				<view class="recored">
					<view style="display: inline-block;  color: #fff;">
						历史记录:
					</view>
					<uni-tag text="菲菲汽车美容1"
						custom-style="background-color: transparent; border-color: transparent; color: #fff;">
					</uni-tag>
					<uni-tag text="菲菲汽车美容2"
						custom-style="background-color: transparent; border-color: transparent; color: #fff;">
					</uni-tag>
					<uni-tag text="菲菲汽车美容3"
						custom-style="background-color: transparent; border-color: transparent; color: #fff;">
					</uni-tag>
					<uni-tag text="菲菲汽车美容4"
						custom-style="background-color: transparent; border-color: transparent; color: #fff;">
					</uni-tag>
				</view>


			</view>
			<view class="shop">
				<uni-list :border="false" class="shopList">
							
								
								<uni-list-item direction="column" :border="false"  v-for="(shop,index) in shopList" :key="index" >
									
									<!-- 自定义 header -->
									<template #header>
										<navigator url="/pacakgeRepair/pages/packageRepairNav/packageRepairNav">
											<view class="list-item-header">
												<text>{{shop.name}}</text>
												<text class="distance">500m</text>
											</view>
											<view class="star" style="display: flex;">
												<uni-rate :readonly="true" :value="2" size="18" />
												<text>{{shop.valuation}}分</text>
												<text>销量:</text>
												<text>{{shop.sale}}</text>
											</view>
										</navigator>
									
									
									</template>
									<!-- 自定义 body，实现左图右文布局 -->
									<template #body>
										<view class="list-item-container">
											<!-- 左图片 -->
											<image src="@/pacakgeRepair/static/shop.png" mode=""
												style="width: 200rpx; height: 200rpx;"></image>
											<!-- 右文字 -->
											<view class="right">
												<view class="des">
													营业时间: <text>{{shop.des1}}</text>
													：
												</view>
												<view class="des">
													营业时间: <text>{{shop.des2}}</text>
													：
												</view>
												<view class="des">
													营业时间: <text>{{shop.des3}}</text>
													：
												</view>
											</view>
										</view>
									</template>
									<!-- 自定义 footer -->
									<template #footer>
									
									</template>
								</uni-list-item>
								
								
							</uni-list>
			</view>

			











				<!-- 	<navigator url="/pacakgeRepair/pages/repairSearch/repairSearch">

					<view style="background-color: #4881f7;">
						<img src="@/static/车辆维修1-01@2x.png" alt="" />
					</view>

					<view class="">
						车辆维修
					</view>
				</navigator> -->


			



		</view>
	</view>
</template>

<script>
	import { listShop} from '@/api/shop/shop.js';
	export default {
		data() {
			return {
				shopList:[
					{
						name:"百世汽车",
						valuation:5,
						sale:200,
						url:"@/pacakgeRepair/static/shop.png",
						
						des1:"周一到周五",
						des2:"周一到周五",
						des3:"周一到周五",
					},
					{
							name:"百世汽车",
							valuation:5,
							sale:200,
							url:"@/pacakgeRepair/static/shop.png",
							
							des1:"周一到周五",
							des2:"周一到周五",
							des3:"周一到周五",
						},
					,
					{
							name:"百世汽车",
							valuation:5,
							sale:200,
							url:"@/pacakgeRepair/static/shop.png",
							
							des1:"周一到周五",
							des2:"周一到周五",
							des3:"周一到周五"
						}	
					
				]

			}
		},
		
		onLoad(){
			
			listShop()
			.then((res)=>{

				console.log("接收到res",res);
			})
			.catch((err)=>{
				
				console.log("shibai接收到err",err);
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			 search(res) {
			        // 这里可以添加搜索逻辑
			        console.log('搜索内容:', res.value);
			    }

		}
	}
</script>

<style scoped>
/* 	.common{
		background-size: 0rpx 0rpx !important;
	} */
	.main>view{
		background-color: #fff;
	}
	.main>.search,.main>.shop{
		background-color: transparent;
	}
	.nav{
		
		background-color: #fff;
		border-radius: 50rpx;
	}
	::v-deep .uni-searchbar{
		width: 100%;
	}
	::v-deep .uni-searchbar__box{
		background-color: transparent !important;
	}
	
	::v-deep .uni-searchbar{
		padding: 0rpx;
		
	}
	.main>.shop{
		background-color: transparent;
		padding-left: 0rpx;
		padding-right: 0rpx;
	}
	
	.shopList {
		row-gap: 20rpx;
		background-color: transparent;
	}

	::v-deep .uni-list-item {
		border-radius: 30rpx;
	}
::v-deep .uni-list-item {
    border-bottom: none; /* 去除底部边框 */
}
	.list-item-header {
		font-size: 30rpx;
		font-weight: 900;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.list-item-header>.distance {
		color: #77b0fe;
	}

	.list-item-container {
		padding: 10rpx 0rpx;
		display: flex;
		column-gap: 20rpx;
	}

	.list-item-container>.right>.des {
		height: 60rpx;
		line-height: 60rpx;


	}

	::v-deep .uni-list--border{
		border: 2rpx solid #fff ;
	}

::v-deep .uni-list-item {
    border-bottom: none; /* 去除底部边框 */
}
	
</style>